<template>
	<view style="background-color: #F4F4F4;">
		<view v-bind:style="display" style="position: fixed;z-index: 999;bottom: var(--window-bottom);right: 5%;margin-bottom: 30px;border-radius: 25px;width: 45px;height: 45px;"  @click="gototop">
				
			<text class="t-icon t-icon-huidaodingbu-copy" style="width: 50px;height: 50px;"></text>
		</view>
		
	<scroll-view scroll-y="true" @scroll="scroll" :scroll-top="top" :scroll-with-animation="animate"  @scrolltoupper="scrolltoupper" style="overflow: hidden;height: 100%;">  
	
		
		<view class="items" v-for="item in test">
			<view class="item" @click="tellfather(item.orderid)">
				<view class="head"> 
						<image style="width: 50px;height: 50px;margin: 15px; border-radius: 5px;" v-bind:src="item.orders[0].shoplogopath"></image>
						<view style="width: 255px;background-color: #FFFFFF;height: 30px;margin-top: 12px;"><text>{{item.orders[0].shopname}}</text><text style="margin-top: 15px;margin-left: 2px;width: 12px;height: 12px; background-repeat: no-repeat;" class="t-icon t-icon-youjiantou"></text></view> 
						<view style="background-color: #FFFFFF; height: 30px;margin-top: 12px;"><text style="color: #808080;">{{item.orders[0].state}}</text></view>
				</view>
				<!--  -->
				<view style="width: auto;" class="body">
				<scroll-view  scroll-x="true" scroll-y="false"  style="background-color: #FFFFFF;height: 100px;margin-top: -10px;margin-left: 20px;margin-right: 15px; width: 280px;" >
					
					<view v-for="pro in item.orders[0].productDTO2"  class="scroll-view-item" style="width: 50px;height: 50px;margin-top: 15px;margin-left: 15px; border-radius: 5px; background-color: #F4F4F4; display: inline-block;flex-direction: row;margin-right: 20px;">
						<view style="display: inline-flex; flex-direction: column;background-color: #FFFFFF;align-items: flex-start;height: auto;margin-right: 15px;">
							<image style="width: 50px;height: 50px;border-radius: 5px;" v-bind:src="pro.productpic"></image>
							<text style="font-size: 13px;">{{pro.productname}}</text>
						</view> 
						
						
						
						
					</view>
					
					
				
				</scroll-view>
				
				<view style="display: flex;flex-direction: column;">
				<text>￥{{item.orders[0].totalprice}}</text> 
				<text style="font-size: 12px;color: #808080;margin-left: 26px;">共{{item.orders[0].totalcount}}件</text>
				</view>
				
			
				</view>
				<!-- <text v-model="test">{{test}}</text> -->
				<!-- <text v-model="order">{{order}}</text> -->
			</view>
			
		</view>	
		
	 
		
	<!-- <Floatbtn></Floatbtn> -->
		
	</scroll-view>
	
 	</view>
</template> 

<script> 
	// import Floatbtn from "../../../components/uni-drag-button/uni-drag-button.vue"
	
	export default{
		// components:{
		// 	Floatbtn
		// },

		data(){
			return{
				display:"display:flex;flex-direction:row",
				test:"",
				top:0,
				display:"display: none;",
				animate:false,
				 
			}
		},
		
		methods:{
			tellfather(orderid){
				this.$emit('child1',orderid)
			},
			
			//****************************************
			scroll(e){
				// uni.showToast({
				// 	title:e.detail.scrollTop.toString()
				// });
				this.top=e.detail.scrollTop
				
				// this.$emit('gettopheight', this.top);
				
				if(this.top>100){
					this.display="display: block;"
				}
				
			},
			gototop(){
				this.animate=true
				this.top=0
				this.display="display: none;"
				
			},
			scrolltoupper(){
				this.animate=false
				this.display="display: none;"
			}
			
			//******************************
			
			
		},
		
		
		mounted() {
			// this.test=getApp().allorder[0].productDTO2[0].productpic
			// this.test=getApp().allorder;
			this.test=uni.getStorageSync("data")
			
			// this.top=uni.getStorageSync("currenttop")
			
		},
		
		
		
		
	}

</script>

<style scoped>
	.container{
		/* white-space: nowrap; */
	}
	.item{
		margin: 10px;
		background-color: #FFFFFF;
		height: 200px;
		border-radius: 10px;
		display: flex;
		flex-direction: column;
	}
	.head{
		display: flex;
		flex-direction: row;
		
	}
	.body{
		display: flex;
		flex-direction: row;
		white-space:nowrap;
	}
</style>
